<template>
	<view class="container">
		<view class="bank-card-tip flex flex-column align-center">
			<view class="bank-icon"></view>
			<text class="bank-card-bind">恭喜您!银行卡绑定成功</text>
			<text class="bank-card-desc">您提交的银行资料已通过审核</text>
			<view class="bank-info flex justify-center flex-column align-center">
				<text class="bank-name">{{info.bankcard[0].bankName}}</text>
				<view class="flex mt-20">
					<text class="label">银行卡号:</text>
					<text class="value">{{info.bankcard[0].cardNumber|cardNumber}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info:{
					bankcard:[{}]
				}
			};
		},
		filters:{
			cardNumber(value){
				
				if(value){
					let header=value.slice(0,2)
					let tail=value.slice(value.length-2,value.length)
					return `${header}****************${tail}`
				}
				else{
					return ""
				}
			}
		},
		async onLoad() {
			try{
				this.info=await this.$u.api.bankCardInfoApi()
			}catch(e){
				//TODO handle the exception
			}
		}
	}
</script>

<style lang="scss">
.container{
	position: relative;
	background-color: #fff;
	.bank-card-tip{
		padding: 200rpx;
		.bank-icon{
			width: 200rpx;
			height: 200rpx;
			background: url("~@/static/images/bankCardDetail/bank-icon.png");
			background-size: 100% 100%;
		}
		.bank-card-bind{
			margin-top: 50rpx;
			font-size: 30rpx;
			color: $color-blue;
		}
		.bank-card-desc{
			margin-top: 10rpx;
			font-size: 24rpx;
			color: #999;
		}
		.bank-info{
			margin-top: 50rpx;
			width: 400rpx;
			height: 200rpx;
			border-radius: 30rpx;
			background-color: rgb(103,204,250);
			.bank-name{
				font-size: 30rpx;
				color: #fff;
			}
			.label{
				margin-right: 10rpx;
				font-size: 24rpx;
				color: #fff;
			}
			.mt-20{
				margin-top: 20rpx;
			}
			.value{
				font-size: 24rpx;
				color: #fff;
			}
		}
	}
}
</style>
